<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<text class="search-icon">🔍</text>
				<input 
					type="text" 
					v-model="searchKeyword" 
					placeholder="搜索音色" 
					@input="handleSearch"
				/>
				<text v-if="searchKeyword" class="clear-icon" @tap="clearSearch">×</text>
			</view>
		</view>
		
		<!-- 分类选择区域 -->
		<view class="category-container">
			<!-- 左侧分类列表 -->
			<scroll-view scroll-y class="category-list">
				<view 
					v-for="(category, index) in filteredCategories" 
					:key="category.id"
					class="category-item"
					:class="{ active: currentCategoryIndex === index }"
					@tap="selectCategory(index)"
				>
					<text class="category-name">{{ category.name }}</text>
					<text class="category-count">{{ category.voices.length }}</text>
				</view>
			</scroll-view>
			
			<!-- 右侧音色列表 -->
			<scroll-view scroll-y class="voice-list">
				<view v-if="isLoadingVoices" class="loading">
					<uni-load-more status="loading" />
				</view>
				<template v-else>
					<view v-if="currentCategory && currentCategory.voices.length > 0">
						<view 
							v-for="voice in currentCategory.voices" 
							:key="voice.id"
							class="voice-item"
							:class="{ 
								active: selectedVoice?.id === voice.id,
								'need-vip': voice.needVip
							}"
							@tap="selectVoice(voice)"
						>
							<view class="voice-info">
								<text class="voice-name">{{ voice.name }}</text>
								<text class="voice-tag">{{ voice.tag }}</text>
							</view>
							<view class="voice-right">
								<text v-if="voice.needVip" class="vip-tag">VIP</text>
								<text v-else class="check">✓</text>
							</view>
						</view>
					</view>
					<view v-else class="empty-state">
						<text class="empty-icon">🔍</text>
						<text class="empty-text">未找到相关音色</text>
					</view>
				</template>
			</scroll-view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="selected-info" v-if="selectedVoice">
				<text class="selected-label">已选择:</text>
				<text class="selected-name">{{ selectedVoice.name }}</text>
				<text class="selected-tag">{{ selectedVoice.tag }}</text>
			</view>
			<button class="confirm-btn" @tap="confirmSelection">确认选择</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getVoiceList } from '@/services/tts'
import { userState } from '@/services/user'

// 状态变量
const voiceCategories = ref([])
const isLoadingVoices = ref(false)
const currentCategoryIndex = ref(0)
const searchKeyword = ref('')
const selectedVoice = ref(null)

// 计算属性
const isVip = computed(() => userState.value.vipLevel !== 'FREE')
const currentCategory = computed(() => {
	if (voiceCategories.value.length === 0) return null
	return voiceCategories.value[currentCategoryIndex.value]
})

// 过滤后的分类列表
const filteredCategories = computed(() => {
	if (!searchKeyword.value) return voiceCategories.value
	
	return voiceCategories.value.map(category => {
		const filteredVoices = category.voices.filter(voice => 
			voice.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
			voice.tag.toLowerCase().includes(searchKeyword.value.toLowerCase())
		)
		return {
			...category,
			voices: filteredVoices
		}
	}).filter(category => category.voices.length > 0)
})

// 获取声音列表
async function fetchVoiceList() {
	try {
		isLoadingVoices.value = true
		const categories = await getVoiceList()
		voiceCategories.value = categories
		
		// 设置默认选中的声音
		if (categories.length > 0 && categories[0].voices.length > 0) {
			selectedVoice.value = categories[0].voices[0]
		}
	} catch (error) {
		console.error('获取声音列表失败:', error)
		uni.showToast({
			title: '获取声音列表失败',
			icon: 'none'
		})
	} finally {
		isLoadingVoices.value = false
	}
}

// 选择分类
function selectCategory(index) {
	currentCategoryIndex.value = index
}

// 选择音色
function selectVoice(voice) {
	if (voice.needVip && !isVip.value) {
		uni.showModal({
			title: 'VIP音色',
			content: '该音色需要开通VIP会员才能使用',
			confirmText: '立即开通',
			success: (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: '/pages/vip/index'
					})
				}
			}
		})
		return
	}
	selectedVoice.value = voice
}

// 确认选择
function confirmSelection() {
	if (!selectedVoice.value) {
		uni.showToast({
			title: '请先选择音色',
			icon: 'none'
		})
		return
	}
	
	// 将选中的音色返回给上一页
	const pages = getCurrentPages()
	const prevPage = pages[pages.length - 2]
	if (prevPage) {
		prevPage.$vm.selectedVoice = selectedVoice.value
	}
	
	uni.navigateBack()
}

// 处理搜索
function handleSearch() {
	// 搜索时自动选择第一个有结果的分类
	if (searchKeyword.value && filteredCategories.value.length > 0) {
		currentCategoryIndex.value = 0
	}
}

// 清除搜索
function clearSearch() {
	searchKeyword.value = ''
}

// 页面加载时获取声音列表
onMounted(() => {
	fetchVoiceList()
})
</script>

<style lang="scss">
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f8f8f8;
}

.search-bar {
	padding: 20rpx 30rpx;
	background-color: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.search-input {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 40rpx;
		padding: 15rpx 30rpx;
		
		.search-icon {
			font-size: 32rpx;
			color: #999;
			margin-right: 20rpx;
		}
		
		input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}
		
		.clear-icon {
			font-size: 40rpx;
			color: #999;
			padding: 10rpx;
		}
	}
}

.category-container {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.category-list {
	width: 200rpx;
	background-color: #f5f5f5;
	height: 100%;
	
	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;
		
		&.active {
			background-color: #fff;
			
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 40rpx;
				background-color: #35ae91;
				border-radius: 0 4rpx 4rpx 0;
			}
			
			.category-name {
				color: #35ae91;
				font-weight: bold;
			}
		}
		
		.category-name {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.category-count {
			font-size: 22rpx;
			color: #999;
			background-color: #eee;
			padding: 4rpx 12rpx;
			border-radius: 20rpx;
		}
	}
}

.voice-list {
	flex: 1;
	background-color: #fff;
	height: 100%;
	padding: 0 20rpx;
	
	.loading {
		padding: 40rpx 0;
		text-align: center;
	}
	
	.voice-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		&.active {
			background-color: #f0f9f5;
			
			.voice-name {
				color: #35ae91;
			}
			
			.check {
				color: #35ae91;
			}
		}
		
		&.need-vip {
			opacity: 0.7;
		}
		
		.voice-info {
			flex: 1;
			
			.voice-name {
				font-size: 30rpx;
				color: #333;
				margin-bottom: 10rpx;
				display: block;
			}
			
			.voice-tag {
				font-size: 24rpx;
				color: #ff6b6b;
				background-color: #fff5f5;
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
			}
		}
		
		.voice-right {
			display: flex;
			align-items: center;
			
			.vip-tag {
				font-size: 24rpx;
				color: #ff9500;
				background-color: #fff5e6;
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
			}
			
			.check {
				font-size: 40rpx;
				color: #999;
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		
		.empty-icon {
			font-size: 80rpx;
			color: #ddd;
			margin-bottom: 20rpx;
		}
		
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
}

.bottom-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.selected-info {
		display: flex;
		align-items: center;
		
		.selected-label {
			font-size: 28rpx;
			color: #666;
			margin-right: 10rpx;
		}
		
		.selected-name {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-right: 10rpx;
		}
		
		.selected-tag {
			font-size: 24rpx;
			color: #ff6b6b;
			background-color: #fff5f5;
			padding: 4rpx 16rpx;
			border-radius: 20rpx;
		}
	}
	
	.confirm-btn {
		background-color: #35ae91;
		color: #fff;
		font-size: 30rpx;
		padding: 15rpx 40rpx;
		border-radius: 40rpx;
		border: none;
		
		&:active {
			opacity: 0.9;
		}
	}
}
</style> 